<!--
 * @Author: panghu chenjh@datamargin.com
 * @Date: 2024-03-27 08:52:34
 * @LastEditors: panghu chenjh@datamargin.com
 * @LastEditTime: 2024-03-27 20:12:32
 * @FilePath: \vue3-vite-mall-admin-system\src\components\menu.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: panghu chenjh@datamargin.com
 * @Date: 2024-03-27 08:52:34
 * @LastEditors: panghu chenjh@datamargin.com
 * @LastEditTime: 2024-03-27 11:07:19
 * @FilePath: \vue3-vite-mall-admin-system\src\components\menu.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!--  @open="handleOpen"
      @close="handleClose" -->
    <el-menu
      background-color="#32363f"
      text-color="#fff"
      :default-active="defaultActive"
      unique-opened
      router
      :collapse="$store.state.isCollapse"
      :collapse-transition="false"
    >
      <el-sub-menu :index="item.id + ''" v-for="(item, index) in menus" :key="index">
        <template #title>
          <el-icon>
            <component :is="item.icon"></component>
          </el-icon>
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item :index="child.frontpath" v-for="(child, i) in item.child" :key="i">
          <template #title>
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            <span>{{ child.name }}</span>
          </template>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>
import { useStore } from 'vuex'
import { computed, ref } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
const store = useStore()
const route = useRoute()
const menus = computed(() => {
  return store.state.menus
})
const defaultActive = ref(route.path)
onBeforeRouteUpdate(to => {
  defaultActive.value = to.path
})
</script>

<style lang="less" scoped>

</style>